import React, { memo } from 'react';
import { connect } from 'umi';
import { DatePicker } from 'antd';
import { SearchInput } from '@/components/UserForm';
import DutySelect from '@/pages/SalaryManage/components/DutySelect';
import Search from '@/pages/SalaryManage/components/SuperSearch';
import { SelectPost } from '@/pages/WorkFlow/components/ScopeGroup';
import { GradeSelector } from '@/pages/Organization/Job/components';
import { queryEmployeeList } from '@/services/salaryManage/salaryCommon';
import { isSuccess } from '@/utils/request';

const SelectPostRef = React.forwardRef(SelectPost);

const { RangePicker } = DatePicker;

const BaseMore = props => {
    const { form, user, children, searchModel = {}, organizationCode } = props;
    const { employeeCode, hireDate, dutyCode, positionCode, rankCode, organizationCode: searOrgCode } = searchModel;
    const { getFieldDecorator } = form;
    return (
        <Search.More>
            <Search.Item label="入职时间">
                {getFieldDecorator('hireDate', {
                    initialValue: hireDate
                })(<RangePicker placeholder="开始时间-结束时间" />)}
            </Search.Item>
            <Search.Item label="姓名">
                {getFieldDecorator('employeeCode', {
                    initialValue: employeeCode
                })(
                    <SearchInput
                        params={{
                            organizationCode: organizationCode || searOrgCode || user.companyId
                        }}
                        getData={async params => {
                            if (!params.organizationCode) {
                                return [];
                            }
                            const employeeResponse = await queryEmployeeList({
                                organizationCode: params.organizationCode
                            });
                            return isSuccess(employeeResponse) ? employeeResponse.data || [] : [];
                        }}
                        selectProps={{
                            placeholder: '请输入员工姓名',
                            allowClear: true
                        }}
                        fieldsName={{
                            value: 'employeeCode',
                            title: 'name'
                        }}
                    />
                )}
            </Search.Item>
            <Search.Item label="岗位">
                {getFieldDecorator('dutyCode', { initialValue: dutyCode })(<DutySelect showSearch allowClear />)}
            </Search.Item>
            <Search.Item label="职位">
                {getFieldDecorator('positionCode', { initialValue: positionCode })(
                    <SelectPostRef
                        showSearch
                        getChildByOrganizationCode={user.companyId}
                        placeholder="请选择职位"
                        getPopupContainer={trigger => trigger.parentNode}
                        dropdownStyle={{
                            maxHeight: '30vh',
                            overflow: 'auto'
                        }}
                        allowClear
                        // filterTreeNode={(inputValue, treeNode) =>
                        //     !inputValue || treeNode.props.title.toLowerCase().indexOf(inputValue.toLowerCase()) > 0
                        // }
                    />
                )}
            </Search.Item>
            <Search.Item label="职级">
                {getFieldDecorator('rankCode', { initialValue: rankCode })(<GradeSelector allowClear showSearch />)}
            </Search.Item>
            {children}
        </Search.More>
    );
};

export default memo(connect(({ user }) => ({ user: user.currentUser }))(BaseMore));
